<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps<{
    ujt: any;
    opt?: any;
}>();
const { $fn } = props.ujt;
const emit = defineEmits(['onUpload']);

function handleFileChange(event: any) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
            const text = e.target?.result;
            emit('onUpload', text);
            rfUploadDom.value.value = '';
        };
        reader.readAsText(file);
    }
}
const rfUploadDom: any = ref(null);
function handleClick() {
    rfUploadDom.value.click();
}
</script>

<template>
    <div class="as-upload-txt" @pointerdown="handleClick()">
        <input
            hidden
            ref="rfUploadDom"
            type="file"
            :accept="opt?.accespt || '.json'"
            @change="handleFileChange"
        />
        <slot>{{ $fn.lg('asai.upload') }}</slot>
    </div>
</template>

<style scoped lang="scss">
.as-upload-txt {
    display: inline-block;
    cursor: pointer;
}
</style>
